{% extends "layout/_layout_admin.html" %}
{% block style %}
     <style>
    .manage-title {
    width: 96px;
    }
    .form-control{
        padding:0 0 0 10px;
    }
    .form-manage {
    width: 68%;
    }
    .form-manage2 {
    width:549px
    }
    </style>
{% endblock %}
{% block content %}
    <div id="box" style="margin: 10px 10px;">
        <div class="ibox contentBox border-all" style="overflow: auto;">
            <div class="content-title border-bottom" style="position:relative;">
                <span>设备</span>
            </div>
            <div class="ibox-content" style="position:relative;">
                <button class="btn btn-default pull-right my-btn my-btn-remove" onclick="delBtn()">删除</button>
                <button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editBtn()">编辑</button>
                <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtn()">添加</button>
                <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                <table id="table"
                       data-toggle="table"
                       data-toolbar=".toolbar"
                       data-pagination="true"
                       data-maintain-selected="true"
                       data-search="true"
                       data-show-refresh="true"
                       data-search-align="left"
                       data-toolbar-align="right">
                    <thead>
                    <tr>
                        <th data-width="60" data-align="center" data-field="id">编号</th>
                        <th data-width="220" data-align="center" data-field="name">设备名称</th>
                        <th data-width="220" data-align="center" data-field="code">设备编码</th>
                        <th data-width="80" data-align="center" data-field="icon">设备图标</th>
                        <th data-width="80" data-align="center" data-field="device_type_name">设备类型</th>
                        <th data-width="80" data-align="center" data-field="device_district_name">设备分区</th>
                        <th data-width="80" data-align="center" data-field="device_group_name">设备分组</th>
                        <th data-width="80" data-align="center" data-field="device_facility_name">设施名称</th>
                        <th data-width="80" data-align="center" data-field="data_type">设备数据类型</th>
                        <th data-width="80" data-align="center" data-field="start_time">设备启动时间</th>
                        <th data-width="80" data-align="center" data-field="valid_time">设备有效时间</th>
                        <th data-field="description">描述</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!--添加 编辑 模态框-->
        <div id="addModal" class="modal fade" style="z-index: 4999!important;">
            <div class="modal-dialog" style="width: 700px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{modalTitle}}</h4>
                    </div>
                    <div class="modal-manage">
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span><span class="glyphicon glyphicon-asterisk mandatory"></span>设备名称：</span>
                            </div>
                            <input type="hidden" v-model="modalData.id">
                            <input type="text" class="form-control form-manage" placeholder=""
                                   v-model="modalData.name">
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span><span class="glyphicon glyphicon-asterisk mandatory"></span>设备编码：</span>
                            </div>
                            <input type="text" class="form-control form-manage" placeholder=""
                                   v-model="modalData.code">
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span>设备图标：</span>
                            </div>
                            <input type="text" class="form-control form-manage" placeholder="图标"
                                   v-model="modalData.icon">
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span>设备类型</span>
                            </div>
                            <select class="form-control form-manage" v-model="deviceTypeName">
                                <option v-for="item in deviceTypeList">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span>设备分区</span>
                            </div>
                            <select class="form-control form-manage" v-model="deviceDistrictName">
                                <option v-for="item in deviceDistrictList">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span>设备分组</span>
                            </div>
                            <select class="form-control form-manage" v-model="deviceGroupName">
                                <option v-for="item in deviceGroupList">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span><span class="glyphicon glyphicon-asterisk mandatory"></span>设备数据类型：</span>
                            </div>
                            <select class="form-control form-manage" v-model="modalData.data_type">
                                <option>WORD</option>
                                <option>DWORD</option>
                                <option>FLOAT</option>
                                <option>DOUBLE</option>
                                <option>STRING</option>
                                <option>LONG</option>
                                <option>LOCATIO</option>
                            </select>
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span><span class="glyphicon glyphicon-asterisk mandatory"></span>设备启动时间：</span>
                            </div>
                            <input type="text" class="form-control form-manage" placeholder=""
                                   v-model="modalData.start_time">
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span><span class="glyphicon glyphicon-asterisk mandatory"></span>设备有效时间：</span>
                            </div>
                            <input type="text" class="form-control form-manage" placeholder=""
                                   v-model="modalData.valid_time">
                        </div>
                        <div class="form-group col-xs-6">
                            <div class="manage-title">
                                <span>排序：</span>
                            </div>
                            <input type="number" class="form-control form-manage" placeholder=""
                                   v-model="modalData.dis_order">
                        </div>
                        <div class="form-group col-xs-12">
                            <div class="manage-title">
                                <span>设备描述：</span>
                            </div>
                            <textarea class="form-control form-manage form-manage2" style="resize: none; "
                                      v-model="modalData.description"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary submit" onclick="submit()">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

        <div id="delModal" class="modal fade" style="z-index: 5030!important;">
            <div class="modal-dialog" style="width: 400px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">提示</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-manage">
                        <img src="static/image/delete.png" alt="" style="float: left;margin-left: 40px;">
                        <h3 class="text-center" style="line-height: 80px;">{{modalDelMsg}}</h3>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary submit" onclick="delData()">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                modalTitle: '',
                modalDelMsg: '',
                modalData: {
                    id:null,
                    name: '',
                    code: '',
                    ParentId: '',
                    icon: '',
                    device_type_id: '',
                    district_id: '',
                    device_group_id: '',
                    data_type: '',
                    lat: '',
                    lng: '',
                    start_time: '',
                    valid_time: '',
                    description: '',
                    dis_order: 0,
                    status:0
                },
                deviceTypeList: [],          //设备类型
                deviceDistrictList: [],      //设备分区
                deviceGroupList: [],         //设备分组
                deviceFacilityList: [],      //设施列表
                deviceTypeName:'',           //设备类型
                deviceDistrictName:'',       //设备分区
                deviceGroupName: '',         //设备分组
                deviceFacilityName: ''       //设施名称
            },
        });

        $('#table').bootstrapTable({
            url: '/core/device/get_all/',
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [15, 20], // 设置页面可以显示的数据条数
            pageSize: 16, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'client', // 设置为服务器端分页
            exportDataType: "all",   //导出文件方式  支持: 'basic', 'all', 'selected'. basic：本页数据，all，获取服务器所有数据，selected,本页选择行数据
            showExport: true,  //是否显示导出按钮
            buttonsAlign: "right",  //按钮位置
        });

        var $table = $('#table');
        var selectRow;
        //为bootstrapTable添加每一行的事件监听
        $table.on('click-row.bs.table', function (r, row, element) {
            $('.table-line-active').removeClass('table-line-active');
            $(element).addClass('table-line-active');
            //点击以后将当前行的数据赋值给vm.modalData
            {#vm.modalData = copyFun(row);#}
            selectRow = row;
        });

        var getSelectRowField = function (fieldName) {
            if (selectRow != undefined)
                return selectRow[fieldName];
            else
                return null;
        }


        var submit = function () {
            for(var i = 0;i < vm.deviceTypeList.length; i ++){
                if(vm.deviceTypeList[i].name == vm.deviceTypeName){
                    vm.modalData.device_type_id = vm.deviceTypeList[i].id
                }
            }
            for(var i = 0;i < vm.deviceGroupList.length; i ++){
                if(vm.deviceGroupList[i].name == vm.deviceGroupName){
                    vm.modalData.device_group_id = vm.deviceGroupList[i].id
                }
            }
            for(var i = 0;i < vm.deviceDistrictList.length; i ++){
                if(vm.deviceDistrictList[i].name == vm.deviceDistrictName){
                    vm.modalData.district_id = vm.deviceDistrictList[i].id;
                }
            }
            for(var i = 0;i < vm.deviceFacilityList.length; i ++){
                if(vm.deviceFacilityList[i].name == vm.deviceFacilityName){
                    vm.modalData.facility_id = vm.deviceFacilityList[i].id;
                }
            }
            var newModalData = copyFun(vm.modalData);

            if (vm.modalTitle == '添加设备') {
                $.ajax({
                url: '/core/device/add/',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(newModalData),
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#addModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        toastr.success('提示：' + "添加成功")
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
            }
            else {
                console.log(vm.modalData);
                $.ajax({
                url: '/core/device/edit/',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(newModalData),
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#addModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        toastr.success('提示：' + "编辑成功")
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
            }

        }

        var delData = function () {
            $.ajax({
                url: '/core/device/del/',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({id: getSelectRowField("id")}),
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#delModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        toastr.success('提示：' + "删除成功")
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }

        var addBtn = function () {
            vm.modalTitle = '添加设备';
            vm.modalData = {
                    id:null,
                    name: '',
                    code: '',
                    icon: '',
                    device_type_name: '',
                    district_name: '',
                    device_group_name: '',
                    device_type_id: '',
                    district_id: '',
                    device_group_id: '',
                    data_type: '',
                    facility_id: '',
                    lat: '',
                    lng: '',
                    start_time: '',
                    valid_time: '',
                    description: '',
                    dis_order: 0,
                    status:0
                };
            selectRow=null;
            $('.table-line-active').removeClass('table-line-active');
            $("#addModal").modal('show');

        }

        var editBtn = function () {
            if (selectRow != undefined) {
                vm.modalTitle = '修改设备类型';
                vm.modalData.id = getSelectRowField("id")
                vm.modalData.code = getSelectRowField("code")
                vm.modalData.ParentId = getSelectRowField("ParentId")
                vm.modalData.name = getSelectRowField("name")
                vm.modalData.icon = getSelectRowField("icon")
                vm.modalData.dis_order = getSelectRowField("dis_order")
                vm.modalData.description = getSelectRowField("description")
                vm.modalData.device_group_name = getSelectRowField("device_group_name")
                vm.modalData.device_type_name = getSelectRowField("device_type_name")
                vm.modalData.district_name = getSelectRowField("district_name")
                vm.modalData.lat = getSelectRowField("lat")
                vm.modalData.lng = getSelectRowField("lng")
                vm.modalData.start_time = getSelectRowField("start_time")
                vm.modalData.valid_time = getSelectRowField("valid_time")
                $("#addModal").modal('show');
            }
            else {
                toastr.info("请选中一行");
            }
        }

        var delBtn = function () {
            if (selectRow != undefined) {
                vm.modalDelMsg = '是否确认删除数据采集网关 【' + selectRow['name'] + '】 ?'
                $("#delModal").modal('show');
            } else {
                toastr.info("请选中一行");
            }

        };
        <!--var myTree = new MyTree('leftTree', '/core/module/leftTree',function (node) {-->
            <!--vm.treeTitle = node.text;-->
            <!--myTable.refresh('/core/module/getList?pid=' + node.id);-->
        <!--});-->
        <!--var myTable = new MyTable('table', '/core/module/getList?pid=1');-->


        //设备类型
        function deviceTypeList(){
        ajaxData('/core/device_type/get_all/','POST','',function(response){
            $("#delModal").modal('hide');
            $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
            vm.deviceTypeList = response.data
        })

        //设备分区
        function deviceDistrictList(){
         $.ajax({
                url: '/core/district/get_all/',
                type: 'POST',
                dataType: 'json',
                data: '',
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#delModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        vm.deviceDistrictList = response.data
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }

        //设备分组
        function deviceGroupList(){
         $.ajax({
                url: '/core/device_group/get_all/',
                type: 'POST',
                dataType: 'json',
                data: '',
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#delModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        vm.deviceGroupList = response.data
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }


        $(document).ready(function () {
            $(".contentBox").css({"height": $(document.body).height() - 20});
            $(window).resize(function () {//当浏览器大小变化时
                $(".contentBox").css({"height": $(document.body).height() - 20})
            });
            //设备类型
            deviceTypeList();
            //设备分区
            deviceDistrictList();
            //设备分组
            deviceGroupList();
        });

        //弹出框提示配置
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "progressBar": true,
            "preventDuplicates": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "400",
            "hideDuration": "1000",
            "timeOut": "2000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
    </script>
{% endblock %}